<template>
    <div class="recommend">
        <div class="recommend-head">目的地推荐</div>
        <div class="recom-title">
            <div class="recom-title-text" :class="{activeTitle:n===index}" v-for="(item,n) of recommend" :key="n" @click="tabChange(n)">{{item.title}}</div>
        </div>
        <div class="recom-site-list" :style="{display:i===index?'block':'none'}" v-for="(item,i) of recommend" :key="i" >
            <div class="recom-site" v-for="(option,j) of item.recomImg" :key="j">
                <img class="recom-site-img" :src="option.recomImgUrl" /> 
                <p class="city-name">{{option.cityName}}</p>
                <p class="person-num">{{option.personNum}}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'HomeRecommend',
    props:{
        recommend:Array
    },
    data(){
        return {
           index:0
        }
    },
    methods:{
        tabChange(n){
            this.index = n
        }
    }
}
</script>
<style lang="stylus" scoped>
    .activeTitle
        border-bottom :.05rem solid orange
    .recommend
        overflow :-hidden
        padding-bottom :50%
        height:0
        margin-top:.45rem
        .recommend-head
            width :100%
            height :10%
            padding-top:.2rem
            padding-bottom:7%
            font-size :.38rem
            text-align :center
        .recom-title
            width:95%
            height :10%
            margin:0 auto
            padding-bottom :8%
            padding-top:.1rem
            .recom-title-text
                width:33.333333%
                float :left
                font-size:.32rem
                text-align :center
                padding-bottom:.1rem
        .recom-site-list
            width:95%
            height:30%
            margin:0 auto
            padding-bottom:29%
            display :none
            .recom-site
                width :33.33333%          
                float :left
                .recom-site-img
                    width:95%
                    height:1.7rem
                    display :block
                    margin:0 auto .1rem
                .city-name
                    width :100%
                    text-align :center
                    font-size:.3rem
                    margin-bottom:.1rem
                .person-num
                    width :100%
                    color:#999
                    text-align :center
                    font-size:.2rem
                    margin-bottom:.1rem
</style>
